<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="../res/layui/css/layui.css" media="all">
<script src="../res/layui/layui.js"></script>

</head>

<body>
	<form id='form_bianji' class="layui-form" action=""
		style="width: 50%; margin-top: 10px;"  lay-filter="form_bianji">

		<div class="layui-form-item">
			<label class="layui-form-label">商品名称</label>
			<div class="layui-input-block">
				<input type="text" name="pname" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">简介</label>
			<div class="layui-input-block">
				<input type="text" name="pIntroduction" placeholder=""
					autocomplete="off" id="jianjie" class="layui-input">
			</div>
		</div>


		<div class="layui-form-item">
			<label class="layui-form-label">类别</label>
			<div class="layui-input-block">
				<select id="categoryid" name="categoryid" lay-verify="" lay-search>
					<option value=""></option>
				</select>
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">价格</label>
			<div class="layui-input-block">
				<input type="text" name="price" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>

		<div class="layui-form-item">
			<label class="layui-form-label">颜色</label>
			<div class="layui-input-block">
				<input type="text" name="pcolor" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">大小</label>
			<div class="layui-input-block">
				<input type="text" name="size" placeholder="" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">商品状态</label>
			<div class="layui-input-block">
				<select id="pstate" name="pstate" lay-verify="">
					<option value=""></option>
					<option value="0">未上架</option>
					<option value="1">下架</option>
					<option value="2">上架</option>
				</select>
			</div>
		</div>

		<div style="display: none">
			<input type="text" name="pid" placeholder="" autocomplete="off"
				class="layui-input">
		</div>

		<div id="img_url" class="layui-col-sm9" style="margin-top: 20px;">

		</div>
		<!-- 添加购物车 -->
		<div class="layui-form-item">

			<div class="layui-input-block">
				<div class="layui-input-inline" style="width: 20px;">
					<i class="layui-icon">&#xe603;</i>
				</div>

				<div class="layui-input-inline" style="width: 40px;">
					<input type="text" name="num" id="name" placeholder=""
						autocomplete="off" class="layui-input">
				</div>
				<div class="layui-input-inline" style="width: 20px;">
					<i class="layui-icon">&#xe602;</i>
				</div>
				<!-- 添加购物车按钮 -->
				<button class="layui-btn" lay-submit lay-filter="form_add">加入购物车</button>
			</div>
		</div>

	</form>

</body>






<script>
	layui.use([ 'layer', 'form' ], function() {
		var $ = layui.$ //jquery
		, layer = layui.layer //弹层
		, form = layui.form //表单	

		//获取共享数据ids
		var ids = layui.sessionData("ids");

		var active = {
			loadData : function() {
				//去后台查询数据?
				$.post("http://localhost:8080/g4/products/query", {
					//从本地拿学生id查询学生  没有则   查询id为101的学生（调试用）
					pid : ids["pid"] ? ids["pid"] : 101
				}, function(result) {
					if (result.code === '0') {
						form.val("form_bianji", result.data);
						form.render('select');
						form.render('radio');
						//图片加载 (以下请用循环做)
						/* $("#img_url").append($("<div>" + "商品描述 "+ "</div>' "))
						$("#img_url").append($("<img src='/g4/" + result.data.picUrl + "' style='width: 100%;' />"))
						$("#img_url").append($("<div>" + "图片描述" + "</div>' "))
						$("#img_url").append($("<img src='/g4/" + result.data.picUrl + "' style='width: 100%;' />"))
						$("#img_url").append($("<div>" + "图片描述" + "</div>' "))
						$("#img_url").append($("<img src='/g4/" + result.data.picUrl + "' style='width: 100%;' />"))
						$("#img_url").append($("<div>" + "图片描述" + "</div>' "))
						$("#img_url").append($("<img src='/g4/" + result.data.picUrl + "' style='width: 100%;' />")) */

					} else {
						layer.alert(result.msg);
					}
				}, "json");
			}
		}
		//加载班级下拉框

		$.post("http://localhost:8080/g4/products/selsctOpResults", {},
				function(result) {
					if (result.code === '0') {
						$.each(result.data, function(index, item) {
							$('#categoryid').append(
									new Option(item.value, item.view));// 下拉菜单里添加元素
						});
						form.render('select');
						active.loadData();
					} else {
						layer.alert(result.msg);
					}
				}, "json");

	});
</script>

</html>
